<template>
	<view>
		<!-- 头部标签 -->
		<view class="head displayFlex" :style="{height:winInfo.height-25+'px',paddingTop:winInfo.top-15+'px'}">
			<image @tap="returnTap" style="width: 34rpx" src="/static/return.png" mode="widthFix">
			</image>
			<text>我的预约</text>
		</view>
		<view class="" :style="{ height: winInfo.height + 'px', paddingTop: winInfo.top +40 + 'px' }">

			<!-- 分段器 全部 -->
			<scroll-view class="label" scroll-x="true" :scroll-left="move">
				<p @tap="selectIndex(index)" class="label-item" v-for="(item,index) in typeList" :key="index">
					<view :style="currIndex==index?'font-weight: 800;font-size: 28rpx;color: #FB353B;':''">
						{{item}}
						<view v-if="currIndex==index" class="selected-icon"></view>
					</view>
				</p>
			</scroll-view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback">
				<scroll-view :scroll-y="true" class="scrollAllY ">
					<view class="activityBox" v-for="(item,index) in WZInfo.Data " :key="index"
						v-if="WZInfo.Data&&WZInfo.Data.length">
						<view class="activityBox-Box" @tap="activityTap(item)">
							<view class="displayFlexSpaceBetween">
								<view class="activityBox-Box-left">
									{{item.Biaoti}}
								</view>
								<view class="activityBox-Box-right displayFlex">
									<text style="color: #FB353B;" v-if="item.HuodongZT == '待同意'">待同意</text>
									<text style="color: #FB353B;" v-if="item.HuodongZT == '待前往'">待前往</text>
									<text style="color: #437DFA;" v-if="item.HuodongZT == '进行中'">进行中</text>
									<text style="color: #999999;" v-if="item.HuodongZT == '已完成'">已完成</text>
									<text style="color: #999999;" v-if="item.HuodongZT == '已结束'">已结束</text>
								</view>
							</view>
							<view class="activityBox-Box-header displayFlex">
								<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill"
									class="avatar-img">
								</image>
								<view style="margin: 0 20rpx;">{{ item.Name || '暂无昵称' }}</view>
							</view>
							<view class="activityBox-Box-apply displayFlex">
								<text class="">
									{{ computeHDType(item) }}
								</text>
								<view>{{ computeHDTime(item.HuodongSJ) }}</view>
								<text>|</text>
								<view>{{ item.XiangxiDZ }}</view>
							</view>
							<scroll-view :scroll-x="true" :scroll-y="false" class="scrollAll ">
								<div class="displayFlex">
									<div class="scrollAll-category" v-for="val in JSON.parse(item.TupianMS)">
										<image :src="Microi.FileServer + val.Path" mode=""></image>
									</div>
								</div>
							</scroll-view>

						</view>
					</view>
					<view class="noData displayFlexCenter" v-else>
						<view class="">
							<image src="/static/images/my/noBiji.png"></image>
						</view>
						<view>暂没有任何信息 前往</view>
						<view style="display: flex; align-items: center; justify-content: center">
							<view>前往</view>
							<view style="color: #fb353b" @tap="ActivityReTap()">活动预约</view>
							<view class="">
								吧
							</view>
						</view>
					</view>
				</scroll-view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				currIndex: 0,
				PageIndex: 1,
				PageSize: 5,
				isLoading: false,
				WZInfo: {
					page: 1,
					noData: false,
					Data: []
				},
				winInfo: {
					height: 64, //header高度
					top: 26, //标题图标距离顶部距离
					scrollH: 0 //滚动总高度
				},
				typeList: ['全部', '待同意', '待前往', '进行中', '已完成', '已结束'],

			}
		},
		mounted() {
			let obj = {}
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu()
			// #endif
			// #ifdef MP-WEIXIN
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.winInfo = res
						this.winInfo.width = obj.left || res.windowWidth
						this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res
							.statusBarHeight + 44
						this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6

						this.winInfo.scrollH = res.windowWidth
						this.winInfo.bottom = res.windowHeight
						console.log('信息：', res)
						console.log('底部信息：', this.winInfo.bottom)
					}
				})
			}, 0)
			this.loading = false
			// #endif
		},
		onShow() {
			this.gethuodongData()
		},
		onReachBottom: function() {
			if (this.isLoading) return;
			this.isLoading = true;
			this.PageIndex++;
			this.gethuodongData().finally(() => {
				this.isLoading = false;
			});
			console.log('触底le')
		},
		methods: {
			//下拉刷新
			downCallback() {
				this.PageIndex = 1
				this.WZInfo.Data = [];
				this.gethuodongData()
				console.log('下拉刷新')
			},
			/**
			 * 选择标签
			 */
			selectIndex(index) {

				this.currIndex = index;
				// if (this.currIndex != index) {
				// 	this.currIndex = index
				// }
				this.downCallback() //下拉刷新
				console.log('currIndex:', index);

			},
			//获取文章数据
			async gethuodongData() {
				let self = this
				let whereCondition = [];
				// 如果不是“全部”，拼接状态条件
				if (self.currIndex !== 0) {
					whereCondition = [{
						Name: 'HuodongZT',
						Value: self.typeList[self.currIndex],
						Type: '='
					}];
				}
				let res = await self.Microi.FormEngine.GetTableData({
					FormEngineKey: 'diy_huodong',
					_Where: whereCondition,
					_PageSize: this.PageSize, //每页多少条数据5
					_PageIndex: this.PageIndex //第几页数据，从1开始索引
				})
				if (res.Data == 0 || res.Data.length === 0) {
					self.Microi.Tips('暂无相关数据')
					return
				}
				const data = res.Data;
				if (data) {
					// uni.showLoading({
					// 	title: '加载中...'
					// });
					// debugger
					//如果没数据 页码不继续增加
					var hasNext = true;
					if (data.length != 5) {
						hasNext = false;
					}
					if (!data || data.length === 0) {
						if (self.PageIndex === 1) {
							self.WZInfo.Data = [];
						}
						self.Microi.Tips('暂无相关数据')
						self.mescroll.endSuccess(0, false);
						return;
					}

					//设置列表数据
					if (self.PageIndex == 1) self.WZInfo.Data = []; //如果是第一页需手动置空列表
					self.WZInfo.Data = self.WZInfo.Data.concat(data); //追加新数据

					console.log('self.WZInfo.Data.length：', self.WZInfo.Data.length)
					setTimeout(() => {
						self.mescroll.endSuccess(self.WZInfo.Data.length, hasNext);
						uni.hideLoading();
					}, 300);
				}
			},
			computeHDType(item) {
				var HuodongSJ = new Date(item.BaomingJZSJ).getTime();
				var TimeNow = new Date().getTime();
				var baomingCount = item.baomingCount;
				var CanyuRS = item.CanyuRS;
				if (HuodongSJ > TimeNow && baomingCount < CanyuRS) {
					return '报名中';
				} else if (HuodongSJ > TimeNow && baomingCount >= CanyuRS) {
					return '已满员';
				} else if (HuodongSJ <= TimeNow) {
					return '已结束';
				}
			},
			computeHDTime(DataInfo) {
				var time = new Date(DataInfo);
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				if (month < 10) month = `0${month}`;
				var day = time.getDate();
				if (day < 10) day = `0${day}`;
				var xingqi = time.getDay();
				var XingqiArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				xingqi = XingqiArray[xingqi];

				return `${year == new Date().getFullYear() ? '' : year} ${month}月${day}日 ${xingqi} ${DataInfo.split(' ')[1]}`;
			},
			computeNum(num) {
				num = num * 1;
				if (num > 10000) {
					return num / 10000 + 'w+';
				} else if (num > 1000) {
					return num / 1000 + 'k+';
				} else {
					return num;
				}
			},


			activityTap(item) {
				uni.navigateTo({
					url: '/packageA/MyAppointment/detailPage?Id=' + item.Id
				});
			},
			returnTap() {
				uni.navigateBack({
					delta: 1
				});
			},
			ActivityReTap() {
				uni.switchTab({
					url: '/pages/tabbar/my/my'
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.head {
		position: fixed;
		left: 0;
		width: 100%;
		top: 0;
		z-index: 1;
		// background-color: #1F9A4F;
		background-color: #fff;

		image {
			margin: 0 0rpx 0 30rpx;
		}

		text {
			font-weight: 800;
			font-size: 34rpx;
			color: #333333;
		}
	}

	.label {
		position: fixed;
		margin-top: -10rpx;
		display: flex;
		//不换行
		white-space: nowrap;
		z-index: 2;
		padding: 22rpx 0 0;
		align-items: center;
		background-color: #FFF;
		font-weight: 400;
		font-size: 28rpx;
		color: #828282;

		.label-item {
			// flex: 1;
			width: 150rpx;
			//行内块 不换行
			display: inline-block;

			view {
				text-align: center;
			}
		}

		.selected-icon {
			width: 130rpx;
			height: 6rpx;
			background: #FB353B;
			border-radius: 8rpx;

			margin: 4rpx auto 0;
		}
	}

	.query-container {

		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		width: calc(100% - 24rpx);
		height: 80rpx;
		border: 2rpx solid rgba(239, 239, 239, 1);
		border-radius: 40rpx;
		position: relative;

		.query-image-text {
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 4rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.query-text {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 28rpx;
				color: #C5C5C5;
			}
		}

		input {
			flex: 1;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 14px;
			color: #686868;

			padding: 0 27rpx;
		}

	}

	.activityBox {
		margin: 20rpx;

		&-Box {
			margin-top: 16rpx;
			padding: 25rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			&-left {
				font-weight: 800;
				font-size: 36rpx;
				color: #333333;
			}

			&-right {
				image {
					width: 36rpx;
					height: 36rpx;
				}

				font-weight: 500;
				font-size: 30rpx;
				color: #444444;
			}

			&-header {
				margin: 20rpx 0;

				image {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
				}

				text:nth-of-type(1) {
					font-weight: 800;
					font-size: 26rpx;
					margin: 0 15rpx;
					background: linear-gradient(to right, red, blue);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
				}

				text:nth-of-type(2) {
					font-weight: 800;
					font-size: 26rpx;
					color: #FF7F83;
				}
			}

			&-apply {
				font-weight: 500;
				font-size: 24rpx;
				color: #212121;

				text:nth-of-type(1) {
					font-weight: 500;
					font-size: 24rpx;
					color: #FB353B;
					padding: 4rpx 8rpx;
					background: #FFE9E9;
					border-radius: 6rpx;
				}

				text {
					margin: 0 15rpx;
				}
			}
		}
	}

	.scrollAll {

		&-category {
			text-align: center;
			margin: 20rpx 5rpx 0;

			// padding: 10rpx 30rpx;
			image {
				border-radius: 5rpx;
				width: 214rpx;
				height: 212rpx;
			}
		}
	}

	.scrollAllY {
		margin-top: 60rpx;
		// background-color: #FB353B;
	}

	.noData {
		width: 100%;
		height: 80vh;
		flex-direction: column;
		text-align: center;

		image {
			width: 416rpx;
			height: 246rpx;
		}
	}
</style>